<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="div">

        <a href="#" v-for="num in 6" style="margin-left: 10px;" @click.prevent="page=num">{{num}}</a>
        <!-- <button @click="msg=msg+1">点击</button> -->
        <ul>
            <li v-for="item in personList">{{item.name}}</li>
        </ul>

    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.4/axios.min.js"></script>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="./mock.js"></script>
    <script src="./mock-ajax.js"></script>
    <script>
        var app = Vue.createApp({

            data: function () {
                return {
                    arr: [
                        { name: '周飘', sex: 'fm' },
                        { name: '志文', sex: 'm' },
                        { name: '雅芸', sex: 'fm' },
                        { name: '嘉远', sex: 'm' },
                    ],
                    msg: 1, //olleh
                    gender: '',
                    page: 1,
                    personList: []
                }
            },
            /* 侦听器: 侦听状态的改变
             */
            watch: {

                /* msg(newVal,oV){
                    console.log('状态改变','新',newVal,'旧',oV);
                } */

                // 简化版
                /* async page(val) {
                    let res = await axios.get('/user', { page: val });
                    console.log(res);
                    this.personList = res.data
                } */

                //完整版
                page: {
                    // 处理函数
                    async handler(val) {
                        let res = await axios.get('/user', { page: val });
                        this.personList = res.data;
                    },
                    immediate: true, //侦听器一旦被创建，就立即执行handler
                },
                arr: {
                    //可以用，只会当成同步
                    async handler(val, oval) {
                        console.log("1");
                        console.log(val, oval);
                    },
                    deep: true
                    // immediate:true, //侦听器一旦被创建，就立即执行handler
                }
            },
            created() {
                this.arr[0].name = "123";

            },

        }).mount('#div');
    </script>
</body>

</html>